<div id="master">
	<style>
  .ui-state-highlight { height: 1.5em; line-height: 1.2em;  border: 1px solid red }
  #form-builder-area > .nino-grid-col {
  	border: 1px dotted green;
  	min-height: 200px;
  	padding: 10px;
  }
  </style>
  
  
  <!-- Nino main nav
    ================================================== -->
    <ul id="nino-mainmenu" class="clearafter">
    	<li class="nino-brand"><a href>Nino contact pro</a></li>
	</ul>
	
	<!-- Nino Main Settings
    ================================================== -->
	<div id="nino-mainSettings" class="clearafter nino-fullFormPreview1">
		<!-- Left Side -->
		<div class="nino-leftSide">
			<!-- Nino Other Settings -->
			<div class="nino-otherSettings">
				<!-- Add elements -->
				<div class="nino-otherSettingsItem nino-addElements">
					<div class="nino-otherSettingsNav">
						<span class="nino-icon fa fa-angle-left"></span>
						
						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li class="active"><a href="#nino-addElements" role="tab" data-toggle="tab">Elements</a></li>
						</ul>
					</div>
					<div class="nino-otherSettingsContent nino-fieldSettings">
					
						<!-- Tab panes -->
						<div class="tab-content nino-hideScroll">
							<div class="tab-pane active nino-viewport" id="nino-addElements">
								<h2 class="title">Add Elements</h2>								
								<ul class="clearafter nino-allElements">
									<li>
										<h3>Grid System</h3>
										<ul class="clearafter" id="grid-system">
											<li>
												<div class="nino-elementDragAble">
													<span class="nino-wrapText"><span class="fa fa-columns"></span> 1 cols</span>
													<div class="nino-grid-layout-1">
														<div class="nino-grid-col"></div>
													</div>
												</div>												
											</li>
											<li>
												<div class="nino-elementDragAble">
													<span class="nino-wrapText"><span class="fa fa-columns"></span> 2 cols</span>
													<div class="nino-grid-layout-2">
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
													</div>
												</div>												
											</li>
											<li>
												<div class="nino-elementDragAble">
													<span class="nino-wrapText"><span class="fa fa-columns"></span> 3 cols</span>
													<div class="nino-grid-layout-3">
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
													</div>
												</div>
											</li>
											<li>
												<div class="nino-elementDragAble">
													<span class="nino-wrapText"><span class="fa fa-columns"></span> 4 cols</span>
													<div class="nino-grid-layout-4">
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
													</div>
												</div>
											</li>
											<li>
												<div class="nino-elementDragAble">
													<span class="nino-wrapText"><span class="fa fa-columns"></span> 5 cols</span>
													<div class="nino-grid-layout-5">
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
														<div class="nino-grid-col"></div>
													</div>
												</div>
											</li>
										</ul>
									</li>
									<li>
										<h3>Popular Elements</h3>
										<ul class="clearafter" id="popular-elements">
											<li>
												<div class="nino-elementDragAble">
													<span class="nino-wrapText"><span class="fa fa-text-width"></span> Text field</span>
													<div class="nino-formGroup nino-input-icon nino-label-icon nino-icon-right nino-required nino-error">
														<label for="nino-input-name">
															<span class="nino-labelName"><span class="nino-icon fa fa-user"></span>Input Label</span>
															<span class="nino-asterisk">*</span>
															<span class="nino-subLabel">Lorem ipsum dolor sit amet, consectetur</span>
														</label>
														<div class="nino-input-wrap">
															<div class="nino-input">
																<span class="nino-icon fa fa-user"></span>
																<input type="text" placeholder="enter your name" id="nino-input-name">									
															</div>
															<p class="nino-error-message">This is a required field.</p>
														</div>							
													</div>
												</div>
											</li>
											<li>
												<div class="nino-elementDragAble">
													<span class="nino-wrapText"><span class="fa fa-align-left"></span> Text area</span>
												</div>
											</li>
											<li>
												<div class="nino-elementDragAble">
													<span class="nino-wrapText"><span class="fa fa-sort-amount-desc"></span> Drop-down</span>
												</div>
											</li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-check-square-o"></span> Checkbox</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-check-circle-o"></span> Radio button</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-male"></span> Captcha</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-send"></span> submit button</span></div></li>
										</ul>
									</li>
									<li>
										<h3>Other Elements</h3>
										<ul class="clearafter" id="other-elements">
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-paragraph"></span> Paragraph</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-map-marker"></span> Google map</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-twitter"></span> Social link</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-photo"></span> Image</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-header"><sub>1</sub></span> Heading 1</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-header"><sub>2</sub></span> Heading 2</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-header"><sub>3</sub></span> Heading 3</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-header"><sub>4</sub></span> Heading 4</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-header"><sub>5</sub></span> Heading 5</span></div></li>
											<li><div class="nino-elementDragAble"><span class="nino-wrapText"><span class="fa fa-header"><sub>6</sub></span> Heading 6</span></div></li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End Left -->
		
		<!-- Right Side -->
		<div class="nino-rightSide">
			
			<!-- Nino Field Selected -->
			<div class="nino-fieldSelected nino-hideScroll">
				<div class="nino-viewport">
					<div id="form-builder-area">
						<div class="nino-grid-col">
							
						</div>
					</div>
					
					
					<!-- Sample Form Layout Demo -->
					<div class="nino-grid-layout-1" id="form-layout-demo">
						<div class="nino-grid-col nino-sortable">
							<div class="nino-grid-layout-1">
								<div class="nino-grid-col" style="background: #DDDDDD;">
									<h4>form header</h4>
								</div>
							</div>
							<div class="nino-grid-layout-3">
								<div class="nino-grid-col" style="background: #AAAAAA; height: 250px;">col 1</div>
								<div class="nino-grid-col" style="background: #CCCCCC; height: 250px;">col 2</div>
								<div class="nino-grid-col" style="background: #CCCCCC;">
									<div class="nino-grid-layout-1">
										<div class="nino-grid-col" style="background: #AAAAAA;">col 1</div>
									</div>
									<div class="nino-grid-layout-2">
										<div class="nino-grid-col" style="background: #AAAAAA; height: 166px;">col 1</div>
										<div class="nino-grid-col" style="background: #AAAAAA; height: 166px;">col 2</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>